<div [@routerTransition]>
  <div class="m-subheader">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>定制任务</span>
        </h3>
        <span class="m-section__sub"> 管理定制任务的文本头信息 </span>
      </div>
      <div class="col-xs-6 text-right">
        <button (click)="getMonths()" class="btn btn-primary blue">
          <i class="fa fa-plus"></i> 同步任务
        </button>
        <button
          (click)="BatchReceiveTask()"
          class="btn btn-primary blue"
          *ngIf="type == 2"
        >
          <i class="fa fa-plus"></i> 批量接收
        </button>
      </div>
    </div>
  </div>
  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__body">
        <div class="tabbable-line">
          <ul class="nav nav-tabs  m-tabs-line">
            <li class="nav-item m-tabs__item">
              <button
                class="btn btn-primary blue"
                *ngFor="let v of tabs"
                (click)="tabTypeClick(v.label)"
              >
                {{ v.label }}
              </button>
            </li>
          </ul>

          <div class="tab-content" style="padding-top:0;">
            <div class="tab-pane active" id="tab-model">
              <form class="horizontal-form" autocomplete="off">
                <div class="m-form m-form--label-align-right">
                  <div class="row align-items-center m--margin-bottom-10">
                    <div class="col-xl-12">
                      <div class="form-group m-form__group align-items-center">
                        <div class="input-group">
                          <input
                            [(ngModel)]="filterText"
                            name="filterText"
                            autofocus
                            class="form-control m-input"
                            [placeholder]="l('SearchWithThreeDot')"
                            type="text"
                          />
                          <span class="input-group-btn">
                            <button
                              (click)="getMonths($event)"
                              class="btn btn-primary"
                              type="submit"
                            >
                              <i
                                class="flaticon-search-1"
                                [attr.aria-label]="l('Search')"
                              ></i>
                            </button>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div
                    class="row m--margin-bottom-10"
                    [hidden]="!advancedFiltersAreShown"
                  >
                    <!-- <div class="col-md-6">
                                            <div class="form-group">
                                                <select #statusCombobox name="statuses" class="form-control"
                                                    [(ngModel)]="statuses" [attr.data-live-search]="true"
                                                    jq-plugin="selectpicker">
                                                    <option value="">按状态搜索</option>
                                                    <option *ngFor="let status of statuses" [value]="status.value">{{
                                    status.displayText
                              }}</option>
                                                </select>
                                            </div>
                                        </div> -->

                    <!-- <div class="col-md-6">
                      <div class="form-group">
                        <select
                          #teamGroupCombobox
                          name="teamGroup"
                          class="form-control"
                          [(ngModel)]="organizationUnitId"
                          [attr.data-live-search]="true"
                          jq-plugin="selectpicker"
                        >
                          <option value="">按班组搜索</option>
                          <option value="0">未分配</option>
                          <option *ngFor="let teamGroup of teamGroups" [value]="teamGroup.value">{{
                            teamGroup.displayText
                          }}</option>
                        </select>
                      </div>
                    </div> -->
                  </div>

                  <div
                    class="row margin-bottom-10"
                    *ngIf="advancedFiltersAreShown"
                  >
                    <div class="col-sm-12 text-right">
                      <button
                        class="btn btn-metal"
                        (click)="getMonths($event, 1)"
                      >
                        <i class="fa fa-refresh"></i>
                        {{ l("Refresh") }}
                      </button>
                    </div>
                  </div>
                  <div class="row margin-bottom-10">
                    <div class="col-sm-12">
                      <span
                        class="clickable-item text-muted"
                        *ngIf="!advancedFiltersAreShown"
                        (click)="
                          advancedFiltersAreShown = !advancedFiltersAreShown
                        "
                      >
                        <i class="fa fa-angle-down"></i>
                        {{ l("ShowAdvancedFilters") }}</span
                      >
                      <span
                        class="clickable-item text-muted"
                        *ngIf="advancedFiltersAreShown"
                        (click)="
                          advancedFiltersAreShown = !advancedFiltersAreShown
                        "
                      >
                        <i class="fa fa-angle-up"></i>
                        {{ l("HideAdvancedFilters") }}</span
                      >
                    </div>
                  </div>
                </div>
              </form>

              <div class="row align-items-center">
                <div
                  class="primeng-datatable-container"
                  [busyIf]="primengTableHelper.isLoading"
                >
                  <p-table
                    #dataTable
                    (onLazyLoad)="getMonths($event)"
                    [value]="primengTableHelper.records"
                    rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                    [paginator]="false"
                    [lazy]="true"
                    emptyMessage="没有数据"
                    scrollable="true"
                    ScrollWidth="100%"
                    [loading]="loading"
                    responsive="primengTableHelper.isResponsive"
                    resizableColumns="primengTableHelper.resizableColumns"
                    dataKey="taskCode"
                  >
                    <ng-template pTemplate="header">
                      <tr>
                        <th style="width: 30px"></th>
                        <th
                          style="width: 130px"
                          *ngIf="
                            isCompleted == false &&
                            isGrantedAny(
                              'Pages.Sidetasks.Edit',
                              'Pages.Sidetasks.Delete',
                              'Pages.Sidetasks.PutInto',
                              'Pages.Sidetasks.Receive'
                            )
                          "
                        >
                          操作
                        </th>
                        <th style="width: 150px" pSortableColumn="taskCode">
                          任务号
                          <p-sortIcon field="taskCode"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="statusName">
                          状态
                          <p-sortIcon field="statusName"></p-sortIcon>
                        </th>
                        <th style="width: 200px" pSortableColumn="drawingCode">
                          图号
                          <p-sortIcon field="drawingCode"></p-sortIcon>
                        </th>
                        <th style="width: 200px" pSortableColumn="amount">
                          数量
                          <p-sortIcon field="amount"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="dueDate">
                          完成时间
                          <p-sortIcon field="dueDate"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="dueDate">
                          是否接收
                          <p-sortIcon field="isReceived"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="dueDate">
                          接收时间
                          <p-sortIcon field="isReceived"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="routingLine">
                          路线
                          <p-sortIcon field="routingLine"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="remark">
                          任务备注
                          <p-sortIcon field="remark"></p-sortIcon>
                        </th>
                        <!-- <th style="width: 150px" pSortableColumn="workShopRemark">
                                                    车间备注
                                                    <p-sortIcon field="workShopRemark"></p-sortIcon>
                                                </th> -->
                      </tr>
                    </ng-template>
                    <ng-template
                      pTemplate="body"
                      let-record
                      let-expanded="expanded"
                    >
                      <tr>
                        <td style="width: 30px">
                          <a href="#" [pRowToggler]="record">
                            <!-- <i class="fa fa-cog"></i> <span class="caret"></span> -->
                            <i
                              [ngClass]="
                                expanded
                                  ? 'pi pi-chevron-down'
                                  : 'pi pi-chevron-right'
                              "
                            ></i>
                          </a>
                        </td>
                        <td
                          style="width: 130px"
                          *ngIf="
                            isCompleted == false &&
                            isGrantedAny(
                              'Pages.Sidetasks.Edit',
                              'Pages.Sidetasks.Delete',
                              'Pages.Sidetasks.PutInto',
                              'Pages.Sidetasks.Receive'
                            )
                          "
                        >
                          <div
                            class="btn-group dropdown"
                            dropdown
                            container="body"
                          >
                            <button
                              dropdownToggle
                              class="dropdown-toggle btn btn-sm btn-primary"
                            >
                              <i class="fa fa-cog"></i
                              ><span class="caret"></span>
                              操作
                            </button>
                            <ul class="dropdown-menu" *dropdownMenu>
                              <li
                                *ngIf="
                                  record.isReceived == true &&
                                  isGranted('Pages.Sidetasks.PutInto')
                                "
                              >
                                <a
                                  (click)="
                                    putIntoProductionModal.show(record, 2)
                                  "
                                  >投产</a
                                >
                              </li>
                              <li
                                *ngIf="
                                  record.isReceived == false &&
                                  isGranted('Pages.Sidetasks.Receive')
                                "
                              >
                                <a (click)="receiveTask(record.id)">接收</a>
                              </li>
                              <!-- <li *ngIf="record.isReceived==true && isGranted('Mes51.Pages.Sidetasks.Edit')">
                                                                <a
                                                                    (click)="createOrEditOrderModal.show(record.id,2)">编辑</a>
                                                            </li>
                                                            <li *ngIf="record.isReceived==true && isGranted('Mes51.Pages.Sidetasks.Delete')">
                                                                <a (click)="deleteModel(record.id)">删除</a>
                                                            </li> -->
                            </ul>
                          </div>
                        </td>
                        <td style="width: 150px">
                          <span class="ui-column-title"> 任务号</span>
                          {{ record.taskCode }}
                        </td>
                        <td style="width: 150px">
                          <span class="ui-column-title"> 状态</span>
                          <div
                            *ngIf="record.isCompleted == false"
                            style="position: relative; text-align: center; width: 60px;
                                                        border-radius: 2em;background-color: #f4516c; color: white;"
                          >
                            <span class="badge">未完成</span>
                          </div>
                          <div
                            *ngIf="record.isCompleted == true"
                            style="position: relative; text-align: center;width: 60px;
                                                        border-radius: 2em;background-color: #34bfa3;color: white;"
                          >
                            <span class="badge">已完成</span>
                          </div>
                        </td>
                        <td style="width: 200px">
                          <span class="ui-column-title"> 图号</span>
                          <!-- <ng-template  pTemplate="body"> -->
                          {{ record.drawingCode }}
                          <!-- </ng-template> -->
                        </td>
                        <td style="width: 200px">
                          <span class="ui-column-title"> 数量</span>
                          <!-- <ng-template pTemplate="body"> -->
                          <div class="row" style="margin: 0;">
                            <div class="col-md-6" style="margin-top:10px;">
                              <i class="icon-layers"></i>
                              <span class="caption-subject bold font-ml">{{
                                record.totalQuantity
                              }}</span>
                            </div>
                            <div class="font-grey-cascade col-md-6 text-right">
                              <div class="caption-subject font-green">
                                交付:
                                {{ record.completedQuantity }}
                              </div>
                              <div class="font-grey-cascade">
                                已投:
                                {{ record.producedQuantity }}
                              </div>
                            </div>
                          </div>
                          <!-- </ng-template> -->
                        </td>
                        <td style="width: 150px">
                          <span class="ui-column-title"> 完成时间</span>
                          {{
                            record.completionTime | momentFormat: "YYYY-MM-DD"
                          }}
                        </td>
                        <td style="width: 150px">
                          <span class="ui-column-title"> 是否接收</span>
                          <div
                            *ngIf="record.isReceived == false"
                            style="position: relative; text-align: center; width: 60px;
                                                        border-radius: 2em;background-color: #f4516c; color: white;"
                          >
                            <span class="badge">未接收</span>
                          </div>
                          <div
                            *ngIf="record.isReceived == true"
                            style="position: relative; text-align: center;width: 60px;
                                                        border-radius: 2em;background-color: #34bfa3;color: white;"
                          >
                            <span class="badge">已接收</span>
                          </div>
                        </td>
                        <td style="width: 150px">
                          <span class="ui-column-title"> 接收时间</span>
                          {{
                            record.receptionTime | momentFormat: "YYYY-MM-DD"
                          }}
                        </td>
                        <td style="width: 150px">
                          <span class="ui-column-title"> 路线</span>
                          {{ record.routingLine }}
                        </td>
                        <td style="width: 150px">
                          <span class="ui-column-title"> 任务备注</span>
                          {{ record.remark }}
                        </td>
                        <!-- <td style="width: 150px">
                                                    <span class="ui-column-title"> 车间备注</span>
                                                    {{ record.workShopRemark }}
                                                </td> -->
                      </tr>
                    </ng-template>
                    <ng-template pTemplate="rowexpansion" let-record>
                      <div
                        class="ui-grid ui-grid-responsive ui-fluid"
                        style="margin:-0.75em; padding:20px;"
                      >
                        <!-- <div class="ui-grid-row"> -->
                        <tr>
                          <td [attr.colspan]="11">
                            <p-table
                              class="detailTable"
                              [value]="record.batches"
                              [paginator]="false"
                              [lazy]="true"
                              [scrollable]="true"
                            >
                              <ng-template pTemplate="header">
                                <tr>
                                  <th style="width: 315px">
                                    投产任务号
                                  </th>
                                  <th style="width: 315px">
                                    数量
                                  </th>
                                  <th style="width: 315px">
                                    计划完成时间
                                  </th>
                                  <th style="width: 315px">
                                    是否完成
                                  </th>
                                  <th style="width: 315px">
                                    完成时间
                                  </th>
                                </tr>
                              </ng-template>
                              <ng-template pTemplate="body" let-rowData>
                                <tr [pSelectableRow]="rowData">
                                  <td style="width: 315px">
                                    {{ rowData.batchCode }}
                                  </td>
                                  <td style="width: 315px">
                                    {{ rowData.quantity }}
                                  </td>
                                  <td style="width: 315px">
                                    {{
                                      rowData.dueDate
                                        | momentFormat: "YYYY-MM-DD"
                                    }}
                                  </td>
                                  <td style="width: 315px">
                                    <div
                                      *ngIf="rowData.isCompleted == false"
                                      style="position: relative; text-align: center; width: 60px;
                                                                                border-radius: 2em;background-color: #f4516c; color: white;"
                                    >
                                      <span class="badge">未完成</span>
                                    </div>
                                    <div
                                      *ngIf="rowData.isCompleted == true"
                                      style="position: relative; text-align: center;width: 60px;
                                                                                border-radius: 2em;background-color: #34bfa3;color: white;"
                                    >
                                      <span class="badge">已完成</span>
                                    </div>
                                  </td>
                                  <td style="width: 315px">
                                    {{
                                      rowData.completionTime
                                        | momentFormat: "YYYY-MM-DD"
                                    }}
                                  </td>
                                </tr>
                              </ng-template>
                            </p-table>
                          </td>
                        </tr>
                        <!-- </div> -->
                      </div>
                    </ng-template>
                  </p-table>
                  <div class="primeng-paging-container">
                    <p-paginator
                      rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                      #paginator
                      (onPageChange)="getMonths($event)"
                      [totalRecords]="primengTableHelper.totalRecordsCount"
                      [rowsPerPageOptions]="
                        primengTableHelper.predefinedRecordsCountPerPage
                      "
                    >
                    </p-paginator>
                    <span class="total-records-count">
                      {{ "总计:" + primengTableHelper.totalRecordsCount }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <putIntoProductionModal
    #putIntoProductionModal
    (modalSave)="getMonths($event)"
  ></putIntoProductionModal>
  <createOrEditOrderModal
    #createOrEditOrderModal
    (modalSave)="getMonths()"
  ></createOrEditOrderModal>
</div>
